<template>
    <div class="container">
        <div class="table-breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>客服工具</el-breadcrumb-item>
                <el-breadcrumb-item>店铺客服按钮配置</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div style="margin: 20px;padding: 20px;background-color: #fff;position: relative;min-height: 500px;">
            <div style="display: flex;align-items: center;">
                <div style="font-size: 18px;font-weight: 500;margin-right: 20px;">店铺客服按钮配置</div>
                <el-button v-if="setting != ''" @click="EditSetting" icon="el-icon-edit" size="mini">修改配置</el-button>
            </div>
            <div v-if="setting == ''">
                <div style="position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);display: flex;flex-direction: column;align-items: center;justify-content: center;margin-top: 30px;">
                    <div style="padding: 10px 60px;border: 1px solid #eee;width: max-content;">
                        <i style="font-size: 30px;color: #FFF;background: #409eff;padding: 10px;border-radius: 100%;" class="el-icon-s-comment"></i>
                    </div>
                    <div style="margin: 30px 0;font-weight: 400;font-size: 18px;color: rgb(16, 16, 16);">店铺客服按钮展示</div>
                    <div style="font-size: 20px;color: rgb(16, 16, 16);margin-bottom: 10px;font-weight: 300;">可选择单名或多名员工，配置客服按钮</div>
                    <div style="font-size: 20px;color: rgb(16, 16, 16);margin-bottom: 80px;font-weight: 300;">客户通过点击小店铺的客服按钮，即可获取员工联系方式，主动联系到员工</div>
                    <el-button type="primary" @click="SettingConfig">开始配置</el-button>
                </div>
            </div>
            <div v-if="setting != ''" style="margin-top: 60px;font-size: 18px;">
                <div style="display: flex;align-items: center;margin-bottom: 20px;">
                    <div style="width: 150px;text-align: right;margin-right: 20px;">类型</div>
                    <div>{{setting.type == 1?'单人':'多人'}}</div>
                </div>
                <div style="display: flex;align-items: center;margin-bottom: 20px;">
                    <div style="width: 150px;text-align: right;margin-right: 20px;">关联员工</div>
                    <div>
                        <span v-for="(item,index) in setting.qy_user_data" ::key="index">
                            {{setting.qy_user_data.length == 1?item.nickname:setting.qy_user_data.length > 1?item.nickname+',':''}}
                        </span>
                    </div>
                </div>
                <div style="display: flex;align-items: center;margin-bottom: 20px;">
                    <div style="width: 150px;text-align: right;margin-right: 20px;">店铺按钮展示</div>
                    <div style="padding: 5px 20px;border: 1px solid #eee;width: max-content;">
                        <i style="font-size: 10px;color: #FFF;background: #409eff;padding: 10px;border-radius: 100%;" class="el-icon-s-comment"></i>
                    </div>
                </div>
                <div style="display: flex;align-items: center;justify-content: center;margin-top: 160px;">
                    <!-- <el-button type="primary">清除配置</el-button> -->
                    <el-popconfirm title="此操作将清除该配置, 是否继续?" @confirm="CancelSeting" style="height: inherit;">
                        <el-button type="primary" slot="reference">清除配置</el-button>
                    </el-popconfirm>
                </div>
            </div>
        </div>
        <modal title="选择员工" v-model="MadalStaff" :centered="true" :maskClosable="false" :footer="null">
            <div>
                <Table :columns="listfields" :data-source="StaffList" :bordered="true" :pagination="false" :loading="loading">
                    <div slot="action" slot-scope="row, index">
                        <div style="display: flex;align-items: center;justify-content: space-around;margin-bottom: 6px">
                            <el-button size="mini" @click="SelectTableStaff(index)">选择</el-button>
                        </div>
                    </div>
                </Table>
                <pagination :total="total" v-model="page" :pageSize.sync="pagesize" :showQuickJumper="true" @change="handleGroupPageChange" @onShowSizeChange="onShowSizeGroupChange"></pagination>
            </div>
        </modal>
        <modal :title="MadalTitle" v-model="visible" :centered="true" :maskClosable="false" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel">
            <div>
                <el-form label-width="100px" class="demo-ruleForm">
                    <el-form-item label="模版名:">
                        <el-radio-group v-model="radio" @change=RadioChange>
                            <el-radio :label="1">单人</el-radio>
                            <el-radio :label="2">多人</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="关联员工:">
                        <el-button size="mini" @click="MadalStaff = true">选择</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-tag v-for="(item,index) in userList" style="margin-right: 10px;" :key="index" closable @close="TagsClose(item)" effect="plain">
                            {{item.nickname}}
                        </el-tag>
                    </el-form-item>
                </el-form>
            </div>
        </modal>
    </div>
</template>
<script>
    import { mapGetters, mapState, mapActions } from 'vuex';
    import pagination from '@/common/pagination.vue'
    import Table from 'ant-design-vue/lib/table';
    import modal from 'ant-design-vue/lib/modal';
    import 'ant-design-vue/lib/table/style/css';
    import 'ant-design-vue/lib/modal/style/css';
    export default {
        name: 'serviceSetting',
        components: {
            pagination,
            Table,
            modal,
            // Select
        },
        data() {
            return {
                MadalTitle: '店铺客服按钮配置', //madal标题
                visible: false, //添加修改madal
                MadalStaff: false, //员工madal
                radio: 1, //类型.1单人,2多人
                StaffList: [], //员工列表
                total: 0, //定义初始有多少条数据
                page: 1, //默认第几页
                pagesize: 10, //一页显示多少条数据
                userList: [], //添加员工的arr
                setting: '' //配置信息
            };
        },
        computed: {
            ...mapState({
                listfields: state => state.serviceSetting.fields, //获取员工列表的表头
            }),
        },
        watch: {},
        created() {},
        mounted() {
            this.GetFields()
            this.getSetting()
            this.getStaffList()
        },
        methods: {
            ...mapActions({
                GetFields: 'serviceSetting/GetFields', //获取员工列表的表头
            }),
            // 清楚配置
            CancelSeting() {
                var that = this
                var params = {
                    config_id: that.setting.config_id,
                }
                that.$http.post('api/root/qywx/delCallMe', params).then(res => {
                    if (res.code === 1) {
                        that.getSetting()
                        that.$message({
                            message: '清除成功',
                            type: 'success'
                        });
                        that.visible = false
                    } else {
                        that.$message.error(res.msg)
                    }
                }).catch(err => {
                    that.$message.error(err.msg ? err.msg : err.toString())
                })
            },
            // 修改,添加配置的确定按钮
            handleOk() {
                var that = this
                var title = that.MadalTitle
                if (that.userList.length > 0) {
                    if (title == '修改店铺客服按钮配置') {
                        that.EditSetModel()
                    } else {
                        that.AddSetModel()
                    }
                } else {
                    that.$message.error('请选择关联员工')
                }

            },
            // 打开修改配置model
            EditSetting() {
                var that = this
                var setting = that.setting
                that.MadalTitle = '修改店铺客服按钮配置'
                that.radio = setting.type * 1
                that.userList = setting.qy_user_data
                that.visible = true
            },
            // 打开配置model
            SettingConfig() {
                var that = this
                that.MadalTitle = '添加店铺客服按钮配置'
                that.visible = true
            },
            // 配置按钮配置
            AddSetModel() {
                var that = this
                var userList = that.userList
                var arr = []
                userList.forEach((item, index) => {
                    arr.push(item.qy_user_id)
                })
                console.log(arr);
                var params = {
                    qy_user_ids: arr,
                    type: that.radio,
                    scene: 1,
                }
                that.$http.post('api/root/qywx/addCallMe', params).then(res => {
                    if (res.code === 1) {
                        that.getSetting()
                        that.$message({
                            message: '配置成功',
                            type: 'success'
                        });
                        that.visible = false
                        // console.log(res);
                    } else {
                        that.$message.error(res.msg)
                    }
                }).catch(err => {
                    that.$message.error(err.msg ? err.msg : err.toString())
                })
            },
            // 编辑的时候可以删除选择的员工
            TagsClose(e) {
                // console.log(e);
                this.userList.splice(this.userList.indexOf(e), 1)
            },
            handleCancel() {},
            // 修改配置
            EditSetModel() {
                var that = this
                var userList = that.userList
                var arr = []
                userList.forEach((item, index) => {
                    arr.push(item.qy_user_id)
                })
                console.log(arr);
                var params = {
                    config_id: that.setting.config_id,
                    qy_user_ids: arr,
                    type:2
                    // type: that.radio == 1?2:2,
                }
                that.$http.post('api/root/qywx/editCallMe', params).then(res => {
                    if (res.code === 1) {
                        that.getSetting()
                        that.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                        that.visible = false
                        // console.log(res);
                    } else {
                        that.$message.error(res.msg)
                    }
                }).catch(err => {
                    that.$message.error(err.msg ? err.msg : err.toString())
                })
            },
            // radio切换
            RadioChange() {
                var that = this
                // that.userList = []
                // console.log(that.radio);
            },
            // 选择员工的操作,radio为1,只能选择一个重复替换,radio位2,可以选择多个,重复去重
            SelectTableStaff(row) {
                var that = this
                if (that.radio == 1) {
                    var arr = []
                    var obj = {
                        nickname: row.name,
                        qy_user_id: row.qy_wechat_id
                    }
                    arr.push(obj)
                    that.userList = arr
                    that.MadalStaff = false
                } else {
                    var list = that.userList
                    var obj = {
                        nickname: row.name,
                        qy_user_id: row.qy_wechat_id
                    }
                    if (list.find(item => item.nickname == obj.nickname) == undefined) {
                        that.userList.push(obj)
                    }
                    that.MadalStaff = false
                }
                // console.log(row);
            },

            //获取联系我配置
            getSetting() {
                var that = this
                that.$http.post('api/root/qywx/getCallMeConfig').then(res => {
                    if (res.code === 1) {
                        var data = res.data
                        // console.log(data);
                        if (data.length == 0) {
                            that.setting = ''
                        } else {
                            that.setting = data
                        }
                    } else {
                        that.$message.error(res.msg)
                    }
                }).catch(err => {
                    that.$message.error(err.msg ? err.msg : err.toString())
                })
            },
            // 获取员工列表
            getStaffList() {
                var that = this
                var params = {
                    is_qy: 1,
                    is_all: 0,
                    page: that.page,
                    pagesize: that.pagesize,
                }
                that.$http.post('api/root/qywx/getQyUserList', params).then(res => {
                    if (res.code === 1) {
                        var data = res.data.data
                        // console.log(res);
                        that.total = res.data.count
                        if (data.length > 0) {
                            data.forEach((item, index) => {
                                item.key = item.qy_wechat_id
                            })
                            that.StaffList = data
                        } else {
                            that.StaffList = data
                        }
                    } else {
                        that.$message.error(res.msg)
                    }
                }).catch(err => {
                    that.$message.error(err.msg ? err.msg : err.toString())
                })
            },
            // 员工分页
            handlePageChange(pageno, pagesize) { //点击第几页触发的函数
                this.page = pageno;
                this.pagesize = pagesize;
                this.getStaffList()
            },
            // 员工分页
            onShowSizeChange(current, size) { //改变每页显示条目数的函数
                //pagesize 变化的回调
                this.page = current;
                this.pagesize = size;
                this.getStaffList()
            },


        },
    };
</script>
<style lang="less" scoped>
    .container {
        height: 100%;
        background-color: #f5f5f5;
    }

    .table-breadcrumb {
        height: 6%;
        min-height: 40px;
        background-color: #fff;
        display: flex;
        align-items: center;
        padding: 0 10px;
    }
</style>